<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function fn (){
            console.log(1);
        }
        fn();
        //立即执行函数1  (function(){})()  用于创建一个独立的作用域 不需要调用就能执行
        (function(a){
            console.log(a);
        })(2);
        //立即执行函数2 (function(){}())
        (function(a){
            console.log(a);
        }(3))

        (function(){
            var docEl = document.documentElement;
        //dpr 物理像素比 移动端一般为1  手机端不固定  iPhone 678 一般就为2
        var dpr = window.devicePixelRatio || 1;

        //设置body 的字体大小
        function setBodyFontSize(){
            //如果页面没有body（加入调用的外部js，body还没有获取到），那么就等着我们页面主要的DOM元素加载
            if(document.body){
                document.body.style.fontSize = (12 * dpr) + 'px';
            }else{
                document.addEventListener('DOMContentLoaded',setBodyFontSize)
            }
        }
        setBodyFontSize();
        
        //set 1rem = viewWidth / 10  设置我们HTML 元素的字体大小
        function setRemUnit(){
            var rem = docEl.clientWidth / 10 ;//将html分成了10份 ，1 rem 等于一份
            docEl.style.fontSize = rem + 'px';
        }
        setRemUnit();

        //当我们页面尺寸大小发生变化时，要重新设置rem大小
        window.addEventListener('resize',setRemUnit)//页面发生变化时，再调用setRemUnit函数
        //pageshow 页面重新加载事件
        window.addEventListener('pageshow',function(e){
            //e,persisted  如果页面是缓存中取过来的 也重新加载页面，从而再次计算rem
            if(e.persisted){
                setRemUnit()
            }
        })

        //有些移动端的浏览器不支持0.5像素的写法

        if(dpr >=2){
            var fakeBody = document.createElement('body');
            var testElement = document.createElement('div');
            testElement.style.border = '.5px solid transparent'
            fakeBody.appendChild(testElement);
            docEl.appendChild(fakeBody);
            if(testElement.offsetHeight === 1 ){
                docEl.classList.add('hairlines')
            }
            docEl.removeChild(fakeBody)
        }

        }(window,document))
    </script>
</body>
</html>